 /*公共样式*/
 *{margin:0px;padding:0px;}
 html,body{width:100%;height:100%;}

 /*使用矢量图标，定义字体*/
 @font-face {
     font-family: 'iconfont';
     src: url('../font/iconfont.eot');
     src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
         url('../font/iconfont.woff2') format('woff2'),
         url('../font/iconfont.woff') format('woff'),
         url('../font/iconfont.ttf') format('truetype'),
         url('../font/iconfont.svg#iconfont') format('svg');
 }
 .iconfont {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 /*加载中...的css样式*/
 #load_box{position:fixed;z-index:999;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.8;}
 #load_box img{position:absolute;top:48%;left:50%;margin-left:-16px;}

 /*播放器最底部背景图片层，做了模糊滤镜处理*/
 #back_box{width:100%;height:100%;background:url(../data/1.jpg) no-repeat center center;filter:blur(10px);}

 /*播放器第二层主体盒子，半透明黑色背景颜色，里面包含所有播放器组件*/
 #music_box{
     position:absolute; /*绝对定位*/
     top:0px;left:0px;
     width:100%;height:100%;
     background-color: rgba(0,0,0,0.5);
     display:flex; /**/ 
     flex-direction:column;
     justify-content:space-between;
 }

 /*播放器主体布局块：头部标题、CD碟片、歌词容器、时间进度条、播放按钮控件容器*/
 .header_row {width:100%;height:6%;display:flex;justify-content:space-between;align-items:center;}
 .cd_row {width:100%; height:55%;border-top:1px solid #999;overflow:hidden;position:relative;}
 .lyric_row {width:100%; height:20%;display:flex;flex-direction:column;align-items:center;}
 .time_row {width:100%; height:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
 .btn_row {width:100%; height:12%;display:flex;justify-content:space-around;align-items:center;}

 /*播放器头部标题*/
 #music_title{font-size:20px;font-weight:400;color: #fff;}
 .header_row span.iconfont{font-size:30px;color: #fff;margin-left:10px;margin-right:10px;}
 
 /*CD播放器样式*/
 #cd_img{margin:10% auto;width:80%;height:auto;background:url(../data/1.jpg) no-repeat center center;background-size:65% auto;}
 #cd_img img{display:block;width:100%;height:auto;margin:0px auto;border-radius:50%;}
 /*CD碟片转圈动画效果*/
 .rainbow{animation:20s rainbow linear infinite;}
 @keyframes rainbow{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
 /*cd碟片上的棍*/
 #needle{width:20%;height:auto;position:absolute;top:0px;left:46%;transform-origin: 0% 0%;transition:transform 0.5s linear;transform:rotate(-30deg);}
 #needle.run{transform:rotate(0deg)}

 /*歌词展示样式*/
 #music_lyric{width:100%;height:100px;padding-top:10px;}
 #music_lyric span{width: 100%;height:40px;text-align: center;font-size: 14px;font-weight: 400;display: block;}
 .lyric_prev,.lyric_next{color: #d1d1d1;}
 #music_lyric .lyric_now{color:#33d8ea;font-size:16px;}

 /*播放时间展示样式*/
 .time_box{display:flex;justify-content:space-between;font-size:13px;color: #fff;font-weight:400;width:100%;}
 #now_time{margin-left:5px;}
 #total_time{margin-right:5px;}
 /*播放进度条效果*/
 .time_axis{width:100%;}
 .slideway{width:100%;height:4px;background:#000;position:relative;}
 #ahead_head{width:12px;height:12px;background: #fff;border-radius: 50%;position: absolute;top: -4px;}
 #progress_bar{position:absolute;top:0;left:0;height:4px;background-image: -webkit-linear-gradient(left,red, #09f);display:block;}

 /*播放按钮控件样式*/
 #volume_toggle{font-size:36px;color:#fff;}
 #btn_prev{font-size:40px;color:#fff;}
 #btn_play{font-size:70px;color:#fff;}
 #btn_next{font-size:40px;color:#fff;}
 #loop_type{font-size:40px;color:#fff;}